<template>
  <div>
    <div id="countdown">
      <svg :width="size" :height="size">
        <circle
          fill="transparent"
          :stroke-width="stroke"
          stroke="#006C85"
          :r="radius"
          :cx="circleOffset"
          :cy="circleOffset"
        ></circle>
        <circle
          class="circle"
          fill="transparent"
          :stroke-width="stroke"
          :stroke="strokeColor"
          :r="radius"
          :cx="circleOffset"
          :cy="circleOffset"
          :stroke-dasharray="circumference"
          :stroke-dashoffset="progress"
          stroke-linecap="round"
        ></circle>
      </svg>
      <div class="yx">
        <div class="num">{{ rate + `%` }}</div>
      </div>
      <div class="bjt"></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
  import { storeToRefs } from 'pinia'
  import appStore from '@/store'
  const { indexStoreData } = appStore.indexStore
  let size = ref<number>(79)
  let stroke = ref<number>(6)
  let percentage = ref<number>(100)
  let timer = ref<any>(null)
  let seconds = ref<number>(100)
  let valuef = ref<number>(4.6)
  let strokeColor = ref<string>('#0EE6D9')

  const rate = computed(() => {
    let info
    info = indexStoreData.improveQualityEfficiency.efficiencyImproveRate
    // eslint-disable-next-line vue/no-side-effects-in-computed-properties
    valuef.value = info as number
    // animate()
    return info
  })
  const radius = computed(() => {
    return size.value / 2 - stroke.value / 2
  })

  const circleOffset = computed(() => {
    return size.value / 2
  })

  const circumference = computed(() => {
    return radius.value * 2 * Math.PI
  })

  const progress = computed(() => {
    return circumference.value - (circumference.value * percentage.value) / 100
  })
  const animate = () => {
    timer.value = setInterval(() => {
      percentage.value--
      // console.log('percentage:', percentage.value)
      // console.log('valuef:', valuef.value)
      console.log(percentage.value === valuef.value)
      if (percentage.value === valuef.value) {
        clearInterval(timer.value)
      }
    }, (seconds.value * 100) / 100 / 10)
  }
  const renderChart = () => {
    animate()
  }
  // watch(
  //   props,
  //   () => {
  //     renderChart()
  //   },
  //   {
  //     deep: true
  //   }
  // )
  onMounted(() => {
    nextTick(() => {
      animate()
    })
  })

  onUnmounted(() => {
    window.clearInterval(timer.value)
  })
</script>
<style lang="scss" scoped>
  .circle {
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
  }

  #countdown {
    display: inline-block;
    position: relative;
  }

  .yx {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 73px;
    height: 73px;
    font-size: 20px;
    font-family: DIN;
    font-weight: bold;
    color: #0ee6d9;
    background-image: url('@/assets/images/binzhou/yx.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    display: flex;
    .num {
      flex: 1;
      display: inline-block;
      text-align: center;
      margin-top: 26px;
    }
  }
  .bjt {
    position: absolute;
    left: -2.5px;
    top: 75%;
    width: 84px;
    height: 39px;
    background-image: url('@/assets/images/binzhou/wy.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
  }
  .active-color {
    color: #38d3ff;
  }
</style>
